<template>
  <div class="m_container">
    <!-- 博客内容 -->
    <div class="m_content">
      <el-form
        ref="editForm"
        status-icon
        :model="editForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="editForm.description"></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型" prop="typeName">
          <el-input v-model="editForm.typeName"></el-input>
        </el-form-item> -->

        <el-form-item label="首图" prop="firstPicture">
          <el-input v-model="editForm.firstPicture"></el-input>
        </el-form-item>

        <el-form-item label="分类" prop="typeName" >
          <el-select v-model="editForm.typeName" placeholder="请选择分类专栏">
            <el-option v-for="(item,index) in getalltype" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>




        <el-form-item label="内容" prop="content">
          <mavon-editor v-model="editForm.content" />
        </el-form-item>
        <el-form-item style="margin: auto">
          <el-button type="primary" @click="saveNote('editForm')"
            >发布文章</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { saveNote } from "@/api/system/noteManage";
import { getAllType} from "@/api/system/type";

export default {
  name: "WriteNote",
  data() {
    return {
      editForm: {
        //博客文章表单
        title: "",
        description: "",
        firstPicture: "",
        content: "",
        typeName: "",
       
      },

      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
        firstPicture: [
          { required: true, message: "请输入首图地址", trigger: "blur" },
        ], 
        content: [
          { required: true, message: "请输入文章内容", trigger: "blur" },
        ], 
        typeName: [
          { required: true, message: "请输入类型名", trigger: "blur" },
        ]
      },

      formLabelWidth: "120px", // 输入框的宽度
      inputVisible: false,
      inputValue: "",
      getalltype:[], // 所有分类专栏
    };
  },
  created() {
    this.initType()
  },
  methods: {
    //校验发布博客表单,校验成功后发布博客
    saveNote(formName) {
      const _this = this;

      this.$refs[formName].validate((valid) => {

        if(valid){
             //发布博客
      saveNote(this.editForm).then((res) => {
        if (res.code === 200) {
          this.$modal.msgSuccess(res.msg);
          _this.$router.push("/");
        } else {
          _this.$message(res.msg);
        }
      });
        }else{
          return false;
        }

      })
   
    },


    //初始化文章专栏
    initType(){
                const _this = this
                getAllType().then(resp=>{
                    console.log(resp)
                    _this.getalltype = resp.data
                })
            },
  },
};
</script>

<style>
.m_container {
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>



